<template>
  <view class="feedback-container">
    <!-- 反馈类型 -->
    <view class="uni-forms-item" data-name="type" required>
      <label>反馈类型</label>
      <checkbox-group @bindchange="onTypeChange">
        <label v-for="(item,index) in this.feedbackTypes"  :key="index">
          <checkbox value="{{item.value}}" checked="{{this.formData.type == item.value}}">{{item.text}}</checkbox>
        </label>
      </checkbox-group>
    </view>
  
    <!-- 反馈内容 -->
    <view class="uni-forms-item" data-name="content" required>
      <label>反馈内容</label>
      <textarea placeholder="请详细描述您的问题或建议" auto-height @bindinput="onContentChange" value="{{this.formData.content}}"></textarea>
    </view>
  
    <!-- 联系方式 -->
    <view class="uni-forms-item" data-name="contact">
      <label>联系方式</label>
      <input placeholder="请输入邮箱/手机号（选填）" @bindinput="onContactChange" value="{{this.formData.contact}}"></input>
    </view>
  
    <!-- 提交按钮 -->
    <button class="submit-btn" type="primary" loading="{{this.isSubmitting}}" @bindtap="handleSubmit">
      {{this.isSubmitting ? '提交中...' : '提交反馈'}}
    </button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
         formData: {
              type: 1,
              content: '',
              contact: ''
            },
            feedbackTypes: [
              { value: 1, text: '功能建议' },
              { value: 2, text: 'BUG反馈' },
              { value: 3, text: '其他问题' }
            ],
            isSubmitting: false
      };
    },
    methods:{
        // 反馈类型改变事件
        onTypeChange(e) {
          const value = e.detail.value;
          this.setData({
            'formData.type': value
          });
        },
      
        // 反馈内容改变事件
        onContentChange(e) {
          const value = e.detail.value;
          this.setData({
            'formData.content': value
          });
        },
      
        // 联系方式改变事件
        onContactChange(e) {
          const value = e.detail.value;
          this.setData({
            'formData.contact': value
          });
        },
      
        // 表单提交事件
        async handleSubmit () {
          try {
            this.setData({
              isSubmitting: true
            });
            if (!this.validateForm()) {
              return;
            }
      
            // 这里调用提交接口
            await this.submitFeedback(this.data.formData);
      
            wx.showToast({
              title: '提交成功',
              icon: 'success'
            });
      
            // 重置表单
            this.setData({
              formData: {
                type: 1,
                content: '',
                contact: ''
              }
            });
      
          } catch (error) {
            wx.showToast({
              title: error.message || '提交失败',
              icon: 'none'
            });
          } finally {
            this.setData({
              isSubmitting: false
            });
          }
        },
      
        // 表单验证方法
        validateForm() {
          const { formData } = this.data;
          if (!formData.content) {
            wx.showToast({
              title: '请输入反馈内容',
              icon: 'none'
            });
            return false;
          }
          if (formData.content.length < 10) {
            wx.showToast({
              title: '内容至少10个字',
              icon: 'none'
            });
            return false;
          }
          if (formData.contact && !/^1\d{10}$|^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(formData.contact)) {
            wx.showToast({
              title: '请输入有效的手机号或邮箱',
              icon: 'none'
            });
            return false;
          }
          return true;
        },
      
        // 模拟提交接口
        submitFeedback (data) {
          return new Promise((resolve) => {
            setTimeout(() => {
              console.log('提交数据:', data);
              resolve();
            }, 1000);
          });
        }
    }
  }
</script>

<style lang="scss" scoped>
.feedback-container {
  padding: 30rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.uni-forms-item label {
  font-weight: 500;
  color: #333;
  padding: 20rpx 0;
}

.submit-btn {
  margin-top: 60rpx;
  border-radius: 50rpx;
  background-color: #2ac2d1;
  font-size: 32rpx;
}

.submit-btn[disabled] {
  background-color: #a0a0a0;
}

textarea {
  min-height: 200rpx;
}
</style>